<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        
        <img id='loadingGif' src='../recursos/imagenes/ajax-loader.gif' alt='' />
        <div id='main'>
        <header>Clientes</header>
        <input type="hidden" id="controlador" name="controlador" value="MaeCliente"/>
    
        <div id="divBuscador" class="redondeado gris izquierda">
           <br>
           <ul id="contenidoBuscador">
               <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
               <li><label>Filtrar y Ordenar por: </label></li>
               <li><select id="selectFiltroOrdenGrilla" name='selectFiltroOrdenGrilla' ></select></li>
               <li><label>&nbsp;&nbsp;Valor:</label></li>
               <li><input type='text' id="valorFiltroGrilla" name="valorFiltroGrilla" onchange="$('#valorFiltroGrilla').val($('#valorFiltroGrilla').val().replace(/[^\w\s]/gi, ''));"/></li>
               <li>&nbsp;&nbsp;<a href='#' class='botonRealizarBusqueda'><i class="icon-search"></i>Buscar</a></li>               
               <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>               
           </ul>
        </div>
        
        <div style="clear: both;"></div> 
        <div id="generalerror"></div>
        <div id="grilla">
            <div id="agregar" class='derecha'>
                    <a id="lnk_agregar"><i class="icon-plus-sign-alt"></i> Agregar</a>
            </div>
           <div style="clear: both;"></div> 
            <div id="resultados" >
                <table id="MaeCliente" class="grilla">
                    <tr id='cabecera'>
                        <td class="TD_filtrable td_NIT_Clientes" value="codMaeCliente">NIT Cliente</td>
                        <td class="TD_filtrable" value="codMaeBarrio">Codigo Barrio</td>
                        <td class="TD_filtrable" value="nombreMaeCliente">Nombre Cliente</td>
                        <td class="TD_filtrable" value="telefono">Telefono</td>
                        <td class="TD_filtrable" value="direccion">Direccion</td>
                        <td class="TD_filtrable" value="eMail">EMail</td>
                        <td class="TD_filtrable td_activo_otros" value="activo">Activo</td>
                        <td class="td_acciones_otros">Acciones</td>
                    </tr>
                </table>
                <div class="pagination-centered" id="divPaginacion"> 
                    <input type="HIDDEN" id="paginaActual" name="paginaActual" VALUE="0"/> 
                    <input type="HIDDEN" id="totalPaginas" name="totalPaginas" VALUE="0"/> 
                    <input type="HIDDEN" id="registrosPorPagina" name="registrosPorPagina" VALUE="-1"/> 
                        <ul class="pagination"> 
                            <li><img class="paginacion_begin" id="paginacion_begin" src="../recursos/imagenes/begin.png" style="opacity:0.3" disabled="true"></li> 
                            <li><img class="paginacion_prev" id="paginacion_prev" src="../recursos/imagenes/previous.png" style="opacity:0.3" disabled="true"></li> 
                            <li class="unavailable"><a href="">&hellip;</a></li> 
                            <li class="unavailable"><label id="labelPagina">Pagina 1</label></li>
                            <li class="unavailable"><a href="">&hellip;</a></li> 
                            <li><img class="paginacion_next" id="paginacion_next" src="../recursos/imagenes/next.png"></li>
                            <li><img class="paginacion_end" id="paginacion_end" src="../recursos/imagenes/end.png"></li> 
                        </ul> 
                </div>
           </div>  
        </div>
        </div>
        <div id="divInsert" class="popout" title="Nuevo Cliente">
        <form id="frmInsert">
            <input type="HIDDEN" id="OPERACION" name="OPERACION" VALUE="insert"/>
            <input type="HIDDEN" id="id" name="id"/>
            <table>
                <tr>
                    <td>NIT <b>(Sin digito de verificaci&oacute;n)</b>:</td>
                    <td><input type="text" id="codMaeCliente" name="codMaeCliente"/></td>
                </tr>
                <tr>
                    <td>Cod. Barrio</td>
                    <td>
                        <select id="codMaeBarrio" name="codMaeBarrio">
                            <script type="text/javascript"> 
                                cargarOpcionesSelectDesdeControlador($("#divInsert").find("#codMaeBarrio"),"MaeBarrio","selectAllHTMLSelectFormat");
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Nombre Cliente</td>
                    <td><input type="text" id="nombreMaeCliente" name="nombreMaeCliente" /></td>
                </tr>                
                <tr>
                    <td>Telefono</td>
                    <td><input type="text" id="telefono" name="telefono" /></td>
                </tr>                
                <tr>
                    <td>Direccion</td>
                    <td><input type="text" id="direccion" name="direccion" /></td>
                </tr>                
                <tr>
                    <td>EMail</td>
                    <td><input type="text" id="eMail" name="eMail" /></td>
                </tr>                
                <tr>
                    <td>Activo</td>
                    <td><input type="checkbox" id='activo' name='activo' checked="checked"/> </td>
                </tr>                                               
            </table>
            <div id="errormessage"></div>
        </form>
        </div>
        
        <div id="divUpdate" class="popout" title="Editar Cliente">
        <form id="frmUpdate">
            <input type="HIDDEN" id="OPERACION" name="OPERACION" VALUE="update"/>
            <input type="HIDDEN" id="id" name="id" VALUE=""/>
            <table>
                <tr>
                    <td>NIT <b>(Sin digito de verificaci&oacute;n)</b>:</td>
                    <td><input type="text" id="codMaeCliente" name="codMaeCliente"/></td>
                </tr>
                <tr>
                    <td>Cod. Barrio</td>
                    <td>
                        <select id="codMaeBarrio" name="codMaeBarrio">
                            <script type="text/javascript"> 
                                cargarOpcionesSelectDesdeControlador($("#divUpdate").find("#codMaeBarrio"),"MaeBarrio","selectAllHTMLSelectFormat");
                            </script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Nombre Cliente</td>
                    <td><input type="text" id="nombreMaeCliente" name="nombreMaeCliente" /></td>
                </tr>                
                <tr>
                    <td>Telefono</td>
                    <td><input type="text" id="telefono" name="telefono" /></td>
                </tr>                
                <tr>
                    <td>Direccion</td>
                    <td><input type="text" id="direccion" name="direccion" /></td>
                </tr>                
                <tr>
                    <td>EMail</td>
                    <td><input type="text" id="eMail" name="eMail" /></td>
                </tr>                
                <tr>
                    <td>Activo</td>
                    <td><input type="checkbox" id='activo' name='activo'/> </td>
                </tr>                                               
            </table>
            <div id="errormessage"></div>
        </form>
        </div>
        
         <!--Imagenes Adjuntas-->
        <div id="divCargarFoto" class="popout" title="Cargar Foto">
            <form id="formUpload" enctype="multipart/form-data">
                <input type="hidden" id="idCliente" name="idCliente" value=""/>
                <input type="hidden" id="extensionesPermitidas" name="extensionesPermitidas" value=""/>
                <table style="width: 100%">
                    <tr>
                        <td>
                            <input name="fileUpload" id="fileUpload" type="file"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img name="logoCliente" id="logoCliente" src="../recursos/imagenes/sinFoto.jpg" height="100">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
    <script type="text/javascript">
        
        $(function() {  
          
            var controlador =$("#controlador").val(); 

            $( "#lnk_agregar" ).click(function() {
                $( "#divInsert" ).dialog( "open" );
            }); 

            $(document).on("click",".link_editar",function(){
                var $div = $( "#divUpdate" );
                var id = $(this).closest("tr").attr("id");
                $.ajax({ type: "POST",
                        url: "../controlador/"+controlador+".php",
                        dataType: 'json',
                        data: "OPERACION=selectById&id="+id+"&controlador="+controlador,
                        cache : false,
                        success: function(item){
                            if(item.hasOwnProperty("error")){
                                showPopupBoxMessage(item.error);
                            }else{                            
                                $div.find("#id").val(item.id);
                                $div.find("#codMaeCliente").val(item.codMaeCliente);
                                $div.find("#codMaeBarrio").val(item.codMaeBarrio);
                                $div.find("#nombreMaeCliente").val(item.nombreMaeCliente);                            
                                $div.find("#telefono").val(item.telefono);                            
                                $div.find("#direccion").val(item.direccion);                            
                                $div.find("#eMail").val(item.eMail);                            
                                //--- chequeo o deschequeo segun sea el caso
                                var e=document.getElementById('divUpdate').getElementsByTagName('*');
                                for (var i=0;i<e.length;i++){
                                    if(e[i].hasAttribute('id')){
                                        if(e[i].id=="activo"){
                                            e[i].checked = (item.activo==="t"?true:false);
                                            //alert(e[i].checked);                                        
                                        }
                                    }
                                }
                                $div.dialog( "open" );                            
                            }
                        },error :function(request, status, error){
                            showPopupBoxMessage(error);
                        }
                    });
            });        
        });

        /****  este procedimiento se calcula en el js Funciones_generales...
        function getNewRow(div){
        
            var $div = $( "#divUpdate" );
                var id = div.find( "#id" );
                $.ajax({ type: "POST",
                    url: "../controlador/"+controlador+".php",
                    dataType: 'json',
                    data: "OPERACION=selectById&id="+id+"&controlador="+controlador,
                    cache : false,
                    success: function(item){
                        if(item.hasOwnProperty("error")){
                            showPopupBoxMessage(item.error);
                        }else{                            
                            return "<tr id='" + id.val() + "'>" +
                                "<td><a href='#' class='link_editar'>" + codMaeCliente.val() + "</a></td>" +
                                "<td>" + codMaeBarrio.val() + "</td>" +
                                "<td>" + nombreMaeCliente.val() + "</td>" +
                                "<td>" + telefono.val() + "</td>" +
                                "<td>" + direccion.val() + "</td>" +
                                "<td>" + eMail.val() + "</td>" +
                                "<td><b>" + (div.find('#activo').is(':checked') ? "<span style='color: rgb(14,51,22)'>SI</span>" : "<span style='color: rgb(184,35,35)'>NO</span>") + "</td>" +
                                "<td><img class='icon-remove' id='icon-remove' src='../recursos/imagenes/remove.png' title='Eliminar el Registro'></td>" +
                              "</tr>";
                        }
                    },error :function(request, status, error){
                        showPopupBoxMessage(error);
                    }
                });                    
        }
        */
        
        cargarOpcionesSelectFiltroDesdeGrilla(
             $("#selectFiltroOrdenGrilla")  //--- Select en el que se cargaran las opciones
            ,$("#"+$("#controlador").val()) //--- TABLA desde la cual se tomaran las opciones (cabecera)
        );
        inicializarPaginacionGrilla(
             $("#controlador").val()    //--- Nombre de la DBtable correspondiente a la grilla
            ,"divPaginacion"            //--- Div en el que maneja la paginacion
            ,""                         //--- Where Section
            ,-1                         //--- Registros por pagina (Cuando es "-1" toma los registros por pagina que se indican en el parametro del sistema)
        );
        cargarDatosGrillaDesdeControlador(
             $("#controlador").val()    //--- idTabla
            ,$("#controlador").val()    //--- controlador
            ,"selectAllHTMLTableFormat" //--- Operacion
            ,""                         //--- Campos adicionales
            ,$("#divPaginacion").find("#paginaActual").val()            //--- Pagina actual
            ,$("#divPaginacion").find("#registrosPorPagina").val()      //-- Registros por pagina
            ,$("#divBuscador").find("#selectFiltroOrdenGrilla").val()   //-- Campo por el cual se hara el filtro
            ,$("#divBuscador").find("#valorFiltroGrilla").val()         //-- Valor con el cual se hara el filtro
        );
            
                //--- Mostrar div para cargar la foto
        $(document).on("click",".icon-picture",function(e){

            var extensionesPermitidas;
            //--- valido los permisos del usuario en session
            if(validarPermisoUsuarioSession("MaeCliente.consultarLogo")!==""){return;}
            //--- Inicializo las variables
            extensionesPermitidas = ".jpg .png";

            var tr = $(this).closest('tr');
            var id = tr.attr( "id" );
            $( "#divCargarFoto" ).find("#idCliente").val(id);
            $( "#divCargarFoto" ).find("#extensionesPermitidas").val(extensionesPermitidas);

            $.ajax({ type: "POST",
                url: "../controlador/MaeCliente.php",
                dataType: 'json',
                data: "OPERACION=selectById&id="+$( "#divCargarFoto" ).find("#idCliente").val()+"&controlador=MaeCliente",
                cache : false,
                success: function(item){
                    if(item.hasOwnProperty("error")){
                        showPopupBoxMessage(item.error);
                    }else if (item.logo==="" || item.logo===null){
                        $( "#divCargarFoto" ).find("#logoCliente").attr("src","../recursos/imagenes/sinFoto.jpg");
                        $( "#divCargarFoto" ).dialog( "open" );
                    }else{
                        $( "#divCargarFoto" ).find("#logoCliente").attr("src","../"+item.logo);
                        $( "#divCargarFoto" ).dialog( "open" );
                    }
                },error :function(request, status, error){
                    showPopupBoxMessage(error);
                }
            });
        });

        //--- preparar divCargarFoto
        $( "#divCargarFoto" ).dialog({
              autoOpen: false,
              height: 'auto',
              width:'auto',
              modal: true,
              buttons: {
                Cancelar: function() {
                  $("#divCargarFoto").dialog( "close" );
                }
              },
              close: function() {
                $("#formUpload").find('input[type="text"],input[type="password"],select,textarea,input[type="number"],input[type="file"]').each(
                    function(index){
                        $(this).val("");
                    }
                );
              }
        });

        //--- UPLOAD FILE   ------ http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery
        $(document).on("change","#fileUpload",function(){

            if(validarPermisoUsuarioSession("MaeCliente.cargarFoto")!==""){return;}

            if(this.files.length>0){
                uploadFile("uploadFotoCliente","formUpload",5*1024*1024,$("#extensionesPermitidas").val());
            }
       });

        function uploadFile_procesarResultado(item){
            //--- actualizo la imagen
            $.ajax({ type: "POST",
                url: "../controlador/MaeCliente.php",
                dataType: 'json',
                data: "OPERACION=selectById&id="+$( "#divCargarFoto" ).find("#idCliente").val()+"&controlador=MaeCliente",
                cache : false,
                success: function(item){
                    if(item.hasOwnProperty("error")){
                        showPopupBoxMessage(item.error);
                    }else if (item.logo==="" || item.logo===null){
                        $( "#divCargarFoto" ).find("#logoCliente").attr("src","../recursos/imagenes/sinFoto.jpg");
                    }else{
                        $( "#divCargarFoto" ).find("#logoCliente").attr("src","../"+item.logo);
                    }
                },error :function(request, status, error){
                    showPopupBoxMessage(error);
                }
            });
        }    
    </script>
</html>
